<template>
  <div class="layout">
    <Layout :style="{ minHeight: '100vh' }">
      <Sider :style="{ background: '#304156' }" :collapsed-width="120" v-model="isCollapsed">
        <div class="layout-logo">
          <Image src="../../../assets/logo.png" />
          <!-- <span style="margin-top: 10px;">医保结算清单管理系统</span> -->
        </div>
        <!-- <Menu theme="dark" width="auto" :open-names="['0', '1', '2', '3']" :active-name="act.data"
          :class="menuitemClasses" ref="menus">
          <RecurveMenu :menus="menu.data"></RecurveMenu>
        </Menu> -->
        <Menu
          v-if="menu_type === 1"
          theme="dark"
          width="auto"
          :active-name="act.data"
          ref="menus"
          :class="menuitemClasses"
        >
          <MenuGroup v-for="(item, index) in menu_group.data" :title="item.title" :key="index">
            <MenuItem
              v-for="(item1, index1) in filter(menu_all.data, item.menuID)"
              :key="index1"
              :name="item1.name"
              :to="item1.path"
            >
              <Icon :type="item1.icon" />
              {{ item1.title }}
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Sider>
      <Layout style="padding-left: 5px">
        <Header>
          <Menu mode="horizontal" theme="light" active-name="1" @on-select="module_change">
            <!-- <div class="layout-nav">
              <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              帧流
              </MenuItem>
              <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              帧火
              </MenuItem>
            </div> -->
            <span
              v-if="userinfo.data.roleID === '99'"
              style="text-align: left; padding-left: 20px; font-size: 20px"
              >当前机构：【{{ tenantName }}】</span
            >
            <div style="float: right; margin-right: 20px; cursor: pointer">
              <Select
                v-model="model1"
                size="small"
                style="width: 150px; padding-right: 10px"
                placeholder="请选择机构"
                @on-change="tenantChg"
                v-if="userinfo.data.roleID === '99'"
                label-in-value
              >
                <Option v-for="item in tenantList" :value="item.tenantID" :key="item.tenantID">{{
                  item.name
                }}</Option>
              </Select>
              <Dropdown placement="left-start">
                <Badge>
                  <Avatar shape="square" icon="ios-person" />
                </Badge>
                <template #list>
                  <DropdownMenu>
                    <DropdownItem>您好，{{ userinfo.data.loginName }}</DropdownItem>
                    <DropdownItem @click="show_pwd">修改密码</DropdownItem>
                    <DropdownItem @click="logout">安全退出</DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>
            </div>
          </Menu>
        </Header>
        <Tabs @toActive="fromActive"></Tabs>
        <Content
          :style="{
            background: '#fff',
            border: '1px solid #dcdee2',
            borderTopWidth: '0px',
            padding: '10px',
          }"
        >
          <router-view v-slot="{ Component }">
            <keep-alive :exclude="['List']">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </Content>
        <Footer class="layout-footer"
          >Copyright © {{ moment().year() }} 技术支持：康卫通信息科技成都有限公司
        </Footer>
      </Layout>
    </Layout>
  </div>
  <UpdatePwd ref="modal"></UpdatePwd>
</template>
<script setup>
import { useCommonStore } from '@/stores/common.js'
const commonStore = useCommonStore()
import http from '@/util/http'
import Tabs from '@/components/system/Tab.vue'
import { useTabStore } from '@/stores/tabs'
import UpdatePwd from './UpdatePassword.vue'
import moment from 'moment'
import _ from 'lodash'
let { proxy } = getCurrentInstance()
let act = reactive({ data: 'KanBan' })
let menu_type = ref(1)
let tenantName = ref('请在屏幕右上角选择相应机构！')
import { useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const store = useTabStore()
const menus = ref()
const modal = ref()
const isCollapsed = ref(false)
const menuitemClasses = computed(() => {
  return ['menu-item', isCollapsed.value ? 'collapsed-menu' : '']
})
const userinfo = reactive({ data: {} })
let menu = reactive({ data: [] })
let menu_all = reactive({ data: [] })
let menu_group = reactive({ data: [] })
let tenantList = reactive({ data: [] })
const menu1 = reactive({
  data: [
    {
      title: '统计分析',
      icon: 'ios-navigate',
      name: '0',
      children: [
        {
          name: 'KanBan',
          icon: 'md-list',
          text: '数据看板',
          path: '/KanBan/Index/ZL',
        },
        {
          name: 'Quota',
          icon: 'md-list',
          text: '配额分析',
          path: '/KanBan/Quota/ZL',
        },
        {
          name: 'Code',
          icon: 'md-list',
          text: '卡密分析',
          path: '/KanBan/Code/ZL',
        },
        {
          name: 'Video',
          icon: 'ios-videocam',
          text: '视频数据分析',
          path: '/KanBan/Video',
        },
      ],
    },
    {
      title: '卡密管理',
      icon: 'ios-navigate',
      name: '1',
      children: [
        {
          name: 'KeyMgr',
          icon: 'md-list',
          text: '卡密列表',
          path: '/KeyMgr/Index/ZL',
        },
      ],
    },
    {
      title: '店铺管理',
      icon: 'ios-navigate',
      name: '2',
      children: [
        {
          name: 'StoreMgr',
          icon: 'md-list',
          text: '店铺列表',
          path: '/StoreMgr/Index/ZL',
        },
      ],
    },
  ],
})
const menu2 = reactive({
  data: [
    {
      title: '统计分析',
      icon: 'ios-navigate',
      name: '0',
      children: [
        {
          name: 'KanBan',
          icon: 'md-list',
          text: '数据看板',
          path: '/KanBan/Index/ZH',
        },
        {
          name: 'Quota',
          icon: 'md-list',
          text: '配额分析',
          path: '/KanBan/Quota/ZH',
        },
        {
          name: 'Code',
          icon: 'md-list',
          text: '卡密分析',
          path: '/KanBan/Code/ZH',
        },
        {
          name: 'Event',
          icon: 'md-list',
          text: '活动分析',
          path: '/KanBan/Event',
        },
      ],
    },
    {
      title: '卡密管理',
      icon: 'ios-navigate',
      name: '1',
      children: [
        {
          name: 'KeyMgr',
          icon: 'md-list',
          text: '卡密明细',
          path: '/KeyMgr/Index/ZH',
        },
      ],
    },
    {
      title: '店铺管理',
      icon: 'ios-navigate',
      name: '2',
      children: [
        {
          name: 'StoreMgr',
          icon: 'md-list',
          text: '店铺明细',
          path: '/StoreMgr/Index/ZH',
        },
      ],
    },
  ],
})
menu.data = menu1.data
const fromActive = (name) => {
  act.data = name
  proxy.$nextTick(() => {
    menus.value.updateOpened()
    menus.value.updateActiveName()
  })
}

const module_change = (name) => {
  menu.data = []
  store.ClearTab(name)

  if (name === '1') {
    menu_type.value = 1
    menu.data = menu1.data
    router.push('/KanBan/Index/ZL')
  }
  if (name === '2') {
    menu_type.value = 2
    menu.data = menu2.data
    router.push('/KanBan/Index/ZH')
  }
  fromActive('KanBan')
}

onMounted(() => {
  proxy.$nextTick(() => {
    menus.value.updateOpened()
    menus.value.updateActiveName()
  })
})

const show_pwd = () => {
  modal.value.modal_show()
}

const getUser = () => {
  http.get('/Basic/Sys/UserInfo', {}, (response) => {
    userinfo.data = response.data.data
    commonStore.saveUserInfo(response.data.data)
    // proxy.$Modal.success({
    //   title: '欢迎',
    //   content:
    //     '尊敬的【' +
    //     userinfo.data.loginName +
    //     '】<p>您上次登录时间：' +
    //     userinfo.data.lastLoginTime +
    //     '</p>',
    //   onOk: () => { },
    // })
  })
}
getUser()
const logout = () => {
  console.log('logout')
  proxy.$Modal.confirm({
    title: '询问',
    content: '确认退出？',
    onOk: () => {
      commonStore.clearPolicy()
      commonStore.clearUserInfo()
      sessionStorage.clear()
      router.push('/')
    },
    onCancel: () => {},
  })
}

const getTenant = () => {
  http.get('/Basic/Tenant/List', {}, (response) => {
    tenantList = response.data.data
  })
}
getTenant()

const tenantChg = (obj) => {
  tenantName.value = obj.label
  sessionStorage.setItem('tenant', obj.value)
}

const roleMenu = () => {
  http.get('/Basic/Menu/Role', {}, (response) => {
    menu_all.data = response.data.data
    menu_group.data = _.chain(menu_all.data).groupBy('pid').value()['']
  })
}
roleMenu()

const filter = (arr, value) => {
  return _.filter(arr, { pid: value })
}

watch(
  () => route.fullPath,
  (newVal) => {
    if (newVal) {
      const pathName = menu_all.data.find((item) => item.path === newVal)?.name
      if (pathName) {
        act.data = pathName
      }
    }
  },
)
</script>

<style scoped>
.logo {
  max-height: 100%;
  max-width: 100%;
  height: 100px;
}

.logo1 {
  margin-left: 10px;
  max-height: 100%;
  max-width: 100%;
  float: left;
  transition: width 0.2s ease 0.2s;
}

.layout-footer {
  height: 50px;
  text-align: center;
  margin-bottom: 15px;
}

.layout-con {
  height: 100%;
  width: 100%;
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}

.menu-item i {
  transform: translateX(0px);
  transition:
    font-size 0.2s ease,
    transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  /* margin-left: -10px; */
  font-size: 14px;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition:
    font-size 0.2s ease 0.2s,
    transform 0.2s ease 0.2s;
  /* vertical-align: middle; */
  font-size: 18px;
}

.collapsed-menu img {
  width: 70px;
}

.dev-run-preview .dev-run-preview-edit {
  display: none;
}

.ivu-layout-header {
  padding: 0px;
  background: #fff;
  display: inline;
  height: 60px;
}

.ivu-menu-dark {
  background: #304156;
}

.ivu-layout-sider {
  background: #304156;
  box-shadow: 2px 3px 3px #888888;
}

.layout-logo {
  display: inline-block;
  width: 200px;
  height: 80px;
  color: #fff;
  background-color: #fff;
  text-align: center;
  font-size: 18px;
}

.ivu-badge {
  display: inline;
}

.ivu-menu-item-selected {
  font-size: 16px;
}

:deep(.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu)) {
  color: #fff;
  background: #242833 !important;
}
</style>
